<template>
  <div>
    <div class="header">
      <div class="inputItem">
        <div class="title">全部状态</div>
        <div class="inputBox">
          <el-select class="select" v-model="WaybillStatus" placeholder="请选择">
            <el-option v-for="item in WaybillStatusArr" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="inputItem">
        <div class="title">运单编号</div>
        <div class="inputBox">
          <el-input v-model="WaybillNumber" @keyup.enter.native="searchHttpList">
          </el-input>
        </div>
      </div>
      <div class="inputItem">
        <div class="title">货源方</div>
        <div class="inputBox">
          <el-input v-model="ownerName" @keyup.enter.native="searchHttpList">
          </el-input>
        </div>
      </div>
      <div class="inputItem">
        <div class="title">项目名称</div>
        <div class="inputBox">
          <el-input v-model="entryName" @keyup.enter.native="searchHttpList">
          </el-input>
        </div>
      </div>
      <div class="inputItem">
        <div class="title">运营商</div>
        <div class="inputBox">
          <el-input v-model="supplierName" @keyup.enter.native="searchHttpList">
          </el-input>
        </div>
      </div>
      <div class="inputItem">
        <div class="title">承运车队</div>
        <div class="inputBox">
          <el-input v-model="fleetName" @keyup.enter.native="searchHttpList">
          </el-input>
        </div>
      </div>
      <div class="inputItem">
        <div class="title">司机姓名</div>
        <div class="inputBox">
          <el-input v-model="driverName" @keyup.enter.native="searchHttpList">
          </el-input>
        </div>
      </div>
      <div class="inputItem">
        <div class="title">订单类型</div>
        <div class="inputBox">
          <el-select class="select" v-model="orderType" placeholder="请选择">
            <el-option v-for="item in orderTypeArr" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>


      <!-- 查询 -->
      <el-button style="margin-top: 15px;" type="primary" size="small" icon="el-icon-search"
        @click="searchHttpList">查询</el-button>
      <el-button style="margin-top: 15px;" type="plain" size="small" icon="el-icon-refresh-right"
        @click="CleanUp">清空</el-button>
    </div>
    <div class="main">
      <div class="list">
        <el-table :data="records" style="width: 100%" ref="table3">
          <el-table-column align="center" prop="SerialNumber" label="序号" width="70">
          </el-table-column>
          <el-table-column align="center" prop="transportStatus" label="运单状态">
            <template>
              <div class="tag" style="margin: 0 auto">
                <div class="dian"></div>
                <div class="text">在途</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="waybillNo" label="运单编号" width="200">
          </el-table-column>

          <el-table-column align="center" prop="orderTypeStr" label="订单类型">
          </el-table-column>

          <el-table-column align="center" prop="ownerName" label="货源方">
          </el-table-column>
          <el-table-column align="center" prop="projectName" label="项目名称">
          </el-table-column>
          <el-table-column align="center" prop="supplierName" label="运营商">
          </el-table-column>
          <el-table-column align="center" prop="fleetName" label="承运车队">
          </el-table-column>
          <el-table-column align="center" prop="driverName" label="司机姓名">
          </el-table-column>
          <!--          <el-table-column align="center" prop="lineName" label="线路">-->
          <!--            <template slot-scope="scope">-->
          <!--              <div>-->
          <!--                {{ scope.row.lineName == null ? "无" : scope.row.lineName }}-->
          <!--              </div>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text" size="small" v-if="permissions.waybillDetail2.perms != null" @click="
                  $router.push(
                    '/orderManagement/WaybillManagement/Details/' +
                    scope.row.waybillId
                  )
                  ">详情</el-button>
                <!-- WaybillManagement/Details/:waybillId -->
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="paginationBox">
        <el-pagination class="pagination" background layout="slot,prev, pager, next" :total="data.total * 1"
          :page-size="data.size * 1" :pager-count="5" @current-change="changePages($event)">
          <template slot>
            <span style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              ">共{{ data.total }}条,每页{{ data.size }}条</span>
          </template>
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import httpApi from "@/http";
export default {
  data() {
    return {
      driverName: "",
      supplierName: "",
      projectName: "",
      fleetName: "",
      ownerName: "",
      WaybillStatus: "", //运单状态
      orderType: "", //业务类型
      WaybillNumber: "", //运单编号
      entryName: "", //项目名称
      SerialNumber: "",
      TypeSelected: "",
      records: [],
      data: {},
      pageCurrent: "1",
      size: "15",
      //全部状态选项
      WaybillStatusArr: [
        { value: "2,3,4", label: "未起运" },
        { value: "5,6", label: "运输中" },

      ],
      //   业务类型选项
      orderTypeArr: [
        { value: "1", label: "拉货/搬家" },
        { value: "2", label: "B端承运订单" },
        { value: "3", label: "C端承运订单" },
        { value: "4", label: "供应商订单" },
        { value: "5", label: "撮合订单" },
      ],
      permissions: {}
    };
  },
  created() {
    this.permissions = JSON.parse(sessionStorage.getItem('permissions'))
  },
  methods: {
    changePages(val) {
      this.pageCurrent = val;
      this.initList();
    },

    initList() {
      // status判定 2:已完成运单, 1:在途运单, 0:待审核运单
      let params = {
        orderStatus: "1",
        current: this.pageCurrent,
        size: this.size,
      };
      httpApi.WaybillManagementApi.getWaybillList(params).then((res) => {
        // console.log(res);
        this.data = res.data.data;
        this.records = res.data.data.records;
        // console.log("总数据", this.data);
        // console.log("列表数据", this.records);
        // 前端解决序号
        this.records.forEach((item, i) => {
          let num = i + 1 + Number(this.size) * (this.pageCurrent - 1);
          item.SerialNumber = num;
        });
      });
    },
	searchHttpList1(){
		this.pageCurrent=1;
		this.searchHttpList();
	},
    searchHttpList() {
      let params = {
        orderStatus: "1",
        current: this.pageCurrent,
        size: this.size,
        transportstatus: this.WaybillStatus,
        waybillNo: this.WaybillNumber,
        orderType: this.orderType,
        projectName: this.entryName,

        ownerName: this.ownerName,
        projectName: this.projectName,
        supplierName: this.supplierName,
        fleetName: this.fleetName,
        driverName: this.driverName
      };
      httpApi.WaybillManagementApi.getWaybillList(params).then((res) => {
        // console.log(res);
        this.data = res.data.data;
        this.records = res.data.data.records;
        // console.log("搜索总数据", this.data);
        // console.log("搜索列表数据", this.records);
        this.records.forEach((item, i) => {
          let num = i + 1 + Number(this.size) * (this.pageCurrent - 1);
          item.SerialNumber = num;
        });
      });
    },

    CleanUp() {
      this.WaybillNumber = "";
      this.entryName = "";
      this.WaybillStatus = "";
      this.orderType = "";
      this.ownerName = "",
        this.projectName = "",
        this.supplierName = "",
        this.fleetName = "",
        this.driverName = ""
      this.searchHttpList1();
    },
    scrollEvent(res) {
      this.$route.meta.scrollTop = res.target.scrollTop
    },

  },
  mounted() {
    this.initList();
  },
  activated() {
    //组件激活时监听表格滚动条位置,
    this.$refs.table2.bodyWrapper.addEventListener('scroll', this.scrollEvent, false)
    // 激活设置滚动位置
    this.$refs.table2.bodyWrapper.scrollTop = this.$route.meta.scrollTop
  },
  beforeRouteLeave(to, from, next) {
    // 为了节省资源，再离开页面的时候关闭对于scroll事件的监听
    this.$refs.table2.bodyWrapper.removeEventListener('scroll', this.scrollEvent)
    next()
  },
};
</script>

<style lang="scss" scoped>
.header {
  // height: 76px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 29px;
  margin-bottom: 8px;

  .inputItem {
    display: flex;
    align-items: center;
    margin-right: 35px;
    margin-top: 15px;

    >.title {
      color: #262626;
      font-size: 12px;
      margin-right: 7px;
    }

    >.inputBox {
      width: 160px;

      .select {
        ::v-deep .el-input__icon {
          line-height: 0;
        }
      }

      ::v-deep .el-input__inner {
        height: 32px;
        font-size: 12px;
      }

      ::v-deep .el-input__inner::placeholder {
        color: #c3c3c3;
        font-size: 12px;
      }
    }
  }
}

.main {
  width: 100%;
  height: calc(100vh - 293px);
  background-color: #fff;

  .list {
    height: calc(100% - 48px);
    padding: 0 30px;
    width: 100%;

    .tag {
      width: 63px;
      height: 28px;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      background-color: #ecf5fe;
      color: #1890ff;

      .dian {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        margin-right: 4px;
        background-color: #1890ff;
      }
    }

    ::v-deep .el-table__body-wrapper {
      height: calc(100vh - 390px) !important;
      overflow-y: scroll;
    }

    // 表头样式
    ::v-deep .el-table__header th {
      background-color: #f0f6fd;
      color: #262626;
      font-size: 12px;
      font-weight: bold;
      text-align: center;

      // 表 body的td
      ::v-deep .el-table__body td {
        color: #595959;
        font-size: 12px;
      }
    }

    .stateBtns {
      height: 30px;
      width: 76px;

      ::v-deep .el-button {
        height: 30px;
        width: 76px;
        font-size: 12px;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 30px;
      }

      .waitPass {
        background-color: #ecf5fe;
        color: #1890ff;
      }

      .noPass {
        background-color: #fde8e9;
        color: #f7555d;
      }
    }
  }

  .paginationBox {
    width: 100%;
    padding: 0 30px;
    background-color: #fff;
    height: 48px;
    display: flex;

    .pagination {
      height: 48px;
      display: flex;
      align-items: center;
      margin-left: auto;
    }
  }
}
</style>
